<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <div id="container">
    
        <span id="information" style="display:none">Your browser doesn't support CSS3 3D Transform</span>
        <h1>使用 jquery 插件实现 3D 分页翻转滑块</h1>
        
        <div id="portfolio"></div>
        
        <ul id="portfolio-item">
          <li><img src="images/dumptruck_teaser.png" alt="Dump Truck" /></li>
          <li><img src="images/rrwooo_rrwooo_teaser.png" alt="Rrwooo" /></li>
          <li><img src="images/dozer_teaser.png" alt="Dozer" /></li>
          <li><img src="images/ltah_teaser.png" alt="Ltah" /></li>
          <li><img src="images/pirates_teaser.png" alt="Pirates" /></li>
          <li><img src="images/rustler_teaser.png" alt="Rustler" /></li>
          <li><img src="images/satellite_teaser.png" alt="Satellite" /></li>
          <li><img src="images/werewolf_teaser.png" alt="Werewolf" /></li>
          <li><img src="images/box_socks_teaser.png" alt="Box Socks" /></li>
          <li><img src="images/capt_kidd_teaser.png" alt="Capt Kidd" /></li>
          <li><img src="images/bat_bedtime_teaser.png" alt="Bat Bedtime" /></li>
          <li><img src="images/grrr_teaser.png" alt="Grrr" /></li>
          <li><img src="images/eensy_teaser.png" alt="Eensy" /></li>
          <li><img src="images/derby_lady_teaser.png" alt="Derby Lady" /></li>
          <li><img src="images/carrot_teaser.png" alt="Carrot" /></li>
          <li><img src="images/brush_teaser.png" alt="Brush" /></li>
          <li><img src="images/nunatakdribbble_teaser.png" alt="Nunatak" /></li>
          <li><img src="images/reefdribbble_teaser.png" alt="Reef" /></li>
          <li><img src="images/glacier_teaser.png" alt="Glacier" /></li>
          <li><img src="images/carddribbble_teaser.png" alt="Card" /></li>
          <li><img src="images/cove_teaser.png" alt="Cove" /></li>
          <li><img src="images/canal_teaser.png" alt="Canal" /></li>
          <li><img src="images/shot_1300121080_teaser.png" alt="Biome" /></li>
          <li><img src="images/shot_1300969987_teaser.png" alt="Globe" /></li>
          <li><img src="images/bestican_teaser.png" alt="Bestican" /></li>
          <li><img src="images/bifocal_teaser.png" alt="Bifocal" /></li>
          <li><img src="images/soupsearch_teaser.png" alt="Soup Search" /></li>
          <li><img src="images/sub_teaser.png" alt="Submarine" /></li>
          <li><img src="images/tomatosoup_teaser.png" alt="Tomato Soup" /></li>
          <li><img src="images/harry_teaser.png" alt="Hipster Harry" /></li>
          <li><img src="images/for_the_man_teaser.png" alt="For The Man" /></li>
          <li><img src="images/extra_teaser.png" alt="Indulgence" /></li>
        </ul>
        
        <nav id="navigation">
          <a href="#1" class="nav selected" data-page="1">1</a>
          <a href="#2" class="nav" data-page="2">2</a>
          <a href="#3" class="nav" data-page="3">3</a>
          <a href="#4" class="nav" data-page="4">4</a>
        </nav>
        
      </div>  
      
      <script src="js/jquery-3.1.1.min (1).js"></script>
      <script src="js/demo.js"></script>
</body>
</html>